<!doctype html>
<html>
    <head>
        <title>YSlow HAR importer</title>
        <style type="text/css">
            body {font: 13px sans-serif;}
            .area, #controls {display: inline-block;}
            .area {width: 45%;}
            #source, #output {width: 99%; height: 57em;}
            #har, #beacon {width: 99%;}
            #controls {vertical-align: top;}
            select, button {display: block; width: 100%;}
            #run {margin-top: 1em;}
            .eg {color: #888;}
        </style>
    </head>
    <body>
        <div class="area">
            <label for="har">jsonp har url (use yslow as callback)</label>
            <div class="eg">e.g.: http://webpagetest.org/export.php?&callback=<b>yslow</b>&test=<b>TEST_ID</b></div>
            <input type="text" id="har">
            <div>or</div>
            <label for="source">data</label>
            <textarea id="source"></textarea>
        </div>
        <div id="controls">
            <label for="info">info</label>
            <select id="info">
                <option value="basic">basic</option>
                <option value="grade">grade</option>
                <option value="stats">stats</option>
                <option value="comps">comps</option>
                <option value="all">all</option>
            </select>
            <label for="ruleset">ruleset</label>
            <select id="ruleset">
                <option value="ydefault">ydefault</option>
                <option value="yslow1">yslow1</option>
                <option value="yblog">yblog</option>
            </select>
            <label for="format">format</label>
            <select id="format">
                <option value="json">json</option>
                <option value="xml">xml</option>
                <option value="plain">plain</option>
            </select>
            <input type="checkbox" id="dict">
            <label for"dict">dictionary</label>
            <button id="run">run</button></br>
        </div>
        <div class="area">
            <label for="beacon">beacon url</label>
            <input type="text" id="beacon">
            <label for="beacon">beacon param</label>
            <input type="text" id="param">
            <label for="output">output</label>
            <textarea id="output"></textarea>
        </div>
        <script src="../../build/har/yslow-har.js"></script>
        <script>
            (function (doc, win) {
                function crossDomainPost (url, content) {
                    // Add the iframe with a unique name
                    var iframe = doc.createElement('iframe'),
                        form = doc.createElement('form'),
                        input = doc.createElement('input'),
                        uniqueString = parseInt(Math.random() * 1e9, 10);

                    doc.body.appendChild(iframe);
                    iframe.style.display = 'none';
                    iframe.contentWindow.name = uniqueString;

                    // construct a form with hidden inputs, targeting the iframe
                    form.target = uniqueString;
                    form.action = url;
                    form.method = 'POST';

                    // repeat for each parameter
                    input.type = 'hidden';
                    input.name = doc.getElementById('param').value || 'data';
                    input.value = content;
                    form.appendChild(input);

                    doc.body.appendChild(form);
                    form.submit();
                }

                win.yslow = function (har) {
                    var res, content, out,
                        util = YSLOW.util,
                        source = doc.getElementById('source'),
                        info = doc.getElementById('info'),
                        format = doc.getElementById('format'),
                        ruleset = doc.getElementById('ruleset'),
                        beacon = doc.getElementById('beacon').value,
                        output = doc.getElementById('output'),
                        dic = doc.getElementById('dict').checked,
                        inf = info.options[info.selectedIndex].value,
                        fmt = format.options[format.selectedIndex].value,
                        rst = ruleset.options[ruleset.selectedIndex].value;

                        try {
                            if (typeof har === 'string') {
                                har = JSON.parse(har);
                            } else {
                                source.value = JSON.stringify(har, null);
                            }
                            res = YSLOW.harImporter.run(doc, har, rst);
                            content = util.getResults(res.context, inf);
                            if (dic && fmt !== 'plain') {
                                content.dictionary = util.getDict(inf, rst);
                            }
                            switch (fmt) {
                            case 'json':
                                out = JSON.stringify(content);
                                break;
                            case 'xml':
                                out = util.objToXML(content);
                                break;
                            case 'plain':
                                out = util.prettyPrintResults(content);
                                break;
                            }
                            output.value = out;
                            if (beacon) {
                                crossDomainPost(beacon, out);
                            }
                        } catch (err) {
                            if (typeof console !== 'undefined') {
                                console.log(err);
                            }
                            output.value = err;
                        }
                }

                doc.getElementById('run').onclick = function () {
                    var source = doc.getElementById('source').value,
                        har = doc.getElementById('har').value;

                    if (har) {
                        jsonp = doc.createElement('script');
                        jsonp.src = har;
                        doc.body.appendChild(jsonp);
                    } else if (source) {
                        yslow(source);
                    }
                };
            }(document, window));
        </script>
    </body>
</html>
<!--
Copyright (c) 2012, Yahoo! Inc.  All rights reserved.
Copyright (c) 2013, Marcel Duran and other contributors. All rights reserved.
Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
-->
